<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% include "component/static_resource_css.html" %}
    <title>Echo - 个人主页</title>
</head>
<body>
<div class="nk-container">
    {% include 'component/header.html' %}

    <!--		 内容 -->
    <div class="main">
        <div class="container">
            <!-- 相关帖子 -->
            <div class="mt-4">
                <h6><b class="square"></b> 相关的帖子 <i>{{ posts_count }}</i></h6>
                <ul class="list-unstyled mt-4 pl-3 pr-3">
                    {% for post in posts_all %}
                        <li class="media pb-3 pt-3 mb-3 border-bottom">
                            <a href="/user/profile/{{ post.user_id }}">
                                <img src="{{ post.header_url }}" class="mr-4 rounded-circle" alt="用户头像"
                                     style="width:50px;height:50px;">
                            </a>
                            <div class="media-body">
                                <h6 class="mt-0 mb-3">
                                    <a href="/post/{{ post.id }}">
                                        {{ post.title.replace(keyword, '<span style="color: red;">'+keyword+'</span>')| safe }}
                                    </a>
                                    {% if post.type == 1 %}
                                        <span class="badge badge-secondary bg-danger" if="${map.post.type==1}"
                                              style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
                                    {% endif %}
                                    {% if post.status == 1 %}
                                        <span class="badge badge-secondary bg-primary" if="${map.post.status==1}"
                                              style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
                                    {% endif %}
                                </h6>
                                <div class="text-muted font-size-12">
                                    <u class="mr-3">
                                        <a href="/user/profile/{{ post.user_id }}">
                                            {{ post.username }}
                                        </a>
                                    </u>
                                    <span class="mr-3">发布于</span><b>{{ post.create_time }}</b>
                                    <ul class="d-inline float-right">
                                        <li class="d-inline ml-2">
                                            <img class="like" src="/static/img/like01.svg"
                                                 style="width:20px;height:20px;cursor: pointer;"
                                                 id="like_{{ post.id }}"
                                            >
                                            <span>{{ post.like_count }}</span>
                                        </li>
                                        <li class="d-inline ml-2">|</li>
                                        <li class="d-inline ml-2">
                                            <img src="/static/img/comment.svg" style="width:20px;height:20px;">
                                            <span>{{ post.comment_count }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    {% endfor %}

                </ul>
                <!-- 分页 -->
                {% include "component/pagination.html" %}
            </div>

        </div>

    </div>


    {% include "component/footer.html" %}
</div>


{% include "component/static_resource_js.html" %}
</body>
</html>

<script>
    var post_like = [];
    $(document).ready(function () {
            post_like = JSON.parse("{{post_like_id_all}}")
            post_like.forEach(post_id => {
                var id = "like_" + post_id
                $('#' + id).attr('src', '/static/img/like02.svg');
            });
        }
    );
    $('.like').click(function () {
        var id = $(this).attr('id').split("_")[1];
        var img = $(this).attr('src').split("like0")[1].split(".")[0]
        console.log(img)
        var abc = $(this)

        var data = {likeType: 1, postId: id};
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:5000/post/like",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            isCorrect: function () {
                alert("ok")
            },
            success: function (data) {

                if (data.data == 0) {
                    abc.attr('src', '/static/img/like01.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount - 1);
                    alert("取消点赞");
                } else {
                    abc.attr('src', '/static/img/like02.svg');
                    var likeCountSpan = abc.next('span');
                    var currentLikeCount = parseInt(likeCountSpan.text());
                    likeCountSpan.text(currentLikeCount + 1);
                    alert("点赞成功");
                }
                if ((data.code + '')[0] != '2') {
                    alert("失败")
                    console.error(data.msg)
                    return
                }
            },
            error: function () {
                alert("未登录")
            },
        });
    })
</script>

